<template>
  <div class="fuse">
    <div class="fuse-left-side">
      <div class="fuse-side_top" style="height: 2.8rem" :style="Img">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img18.png"
            alt=""
          /><span style="vertical-align: middle">应急物资器材统计</span>
        </div>
        <div
          id="data1"
          style="width: 90%; height: 2.3rem; margin-left: 0.15rem"
        ></div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          />
          <span style="vertical-align: middle">应急培训管理</span>
        </div>
        <div class="train">
          <div class="trainvideo">
            <el-image
              style="width: 100%; height: 80%"
              :src="urltrain"
              :fit="'fill'"
              :preview-src-list="srcLists"
            ></el-image>
          </div>
          <div class="traintext">
            <p>{{ traininfo.trainingTheme }}</p>
            <p>类型：{{ traininfo.trainingTypename }}</p>
            <p>内容：{{ traininfo.trainingContent }}</p>
          </div>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">应急值守与值班</span>
        </div>
        <div class="aivideo" style="height: 2rem; flex: 1; margin-left: 0.1rem">
          <el-carousel
            direction="vertical"
            :autoplay="auto"
            indicator-position="none"
          >
            <template
              v-for="(item, index) in Math.ceil(beondutylist.length / 4)"
            >
              <el-carousel-item :key="index + 'table'">
                <ul class="gyvideolist1">
                  <li
                    v-for="(data, index1) in beondutylist.slice(
                      index * 4,
                      item * 4
                    )"
                    :key="index1"
                  >
                    <p>
                      <span>{{ data.dutyMemberType }}姓名：</span>
                      <span>{{ data.dutyPer }}</span>
                    </p>
                    <p>
                      <span>职务：</span>
                      <span>{{ data.dutyPost }}</span>
                    </p>
                    <p>
                      <span>电话：</span>
                      <span>{{ data.phone }}</span>
                    </p>
                  </li>
                </ul>
              </el-carousel-item>
            </template>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="fuse-right-side">
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">应急预案管理</span>
        </div>
        <div class="fuse-main">
          <el-table :data="planData" class="backtable" height="2.5rem">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="planName"
              label="预案名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="accidentTypename"
              label="预案类型"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="planLevelname"
              label="预案级别"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="releaseDate"
              label="发布日期"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img19.png"
            alt=""
          /><span style="vertical-align: middle">AI视频报警处理</span>
          <i class="iconfont" @click="gettransList">&#xe66e;</i>
        </div>
        <div class="fuse-main" style="display: flex; overflow: hidden">
          <div class="manage" style="width: 80%; margin: 0 auto">
            <el-image
              style="width: 100%; height: 80%"
              :src="url"
              :fit="'fill'"
              :preview-src-list="srcList"
            ></el-image>
            <h5><i></i>{{ desc }}</h5>
          </div>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">应急救援组织管理</span>
        </div>
        <div class="system-notice" style="padding: 0.1rem">
          <ul class="organize">
            <li>
              <p>
                <span>{{ headman.rescueMemberType }}</span>
                <span>职务：{{ headman.rescuePost }}</span>
              </p>
              <h1>
                <span>姓名：{{ headman.rescuePer }}</span>
                <span>电话：{{ headman.phone }}</span>
              </h1>
            </li>
            <li>
              <p>
                <span>{{ chargehand.rescueMemberType }}</span>
                <span>职务：{{ chargehand.rescuePost }}</span>
              </p>
              <h1>
                <span>姓名：{{ chargehand.rescuePer }}</span>
                <span>电话：{{ chargehand.phone }}</span>
              </h1>
            </li>
            <li>
              <p>
                <span>{{ member.rescueMemberType }}</span>
                <span>职务：{{ member.rescuePost }}</span>
              </p>
              <h1>
                <span>姓名：{{ member.rescuePer }}</span>
                <span>电话：{{ member.phone }}</span>
              </h1>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog width="60%" title="AI报警记录" :visible.sync="transShow">
      <el-table :data="tableData" height="5rem" class="backtable">
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报警通道" prop="wPassageway" />
        <el-table-column label="报警类型" prop="wName">
          <template slot-scope="scope">
            {{ scope.row.wName }}
          </template>
        </el-table-column>
        <el-table-column label="报警展示">
          <template slot-scope="scope">
            <!-- <img :src="policeimg + scope.row.wFile" alt="" style="width: 200px" /> -->
            <div
              style="width: 200px; height: 150px"
              @click="handleList(scope.row)"
            >
              <el-image
                style="width: 200px; height: 150px"
                :src="scope.row.wFiles"
                :fit="'fill'"
                :preview-src-list="scope.row.srcLists"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="报警描述" prop="wDesc" />
        <el-table-column prop="createtime" label="创建日期">
          <template slot-scope="scope">
            <span>{{
              scope.row.createtime
                ? scope.row.createtime.slice(0, 10)
                : scope.row.createtime
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="75%" title="人员轨迹" :visible.sync="personShow">
      <el-table :data="personData" height="6rem" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psPersonName"
          label="姓名"
          show-overflow-tooltip
          width="80px"
        >
        </el-table-column>
        <el-table-column
          prop="psPersonDept"
          label="区队班组"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psPersonDuty"
          label="职务"
          show-overflow-tooltip
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="入井时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      width="75%"
      :title="this.name + '轨迹列表'"
      :visible.sync="psPersonShow"
    >
      <el-table :data="psPersonData" height="6rem" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssStationName"
          label="分站名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssStationLocation"
          label="分站位置"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="ctime" label="入站时间" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { WebScoket } from '@/api/websocket.js'
import { listVideo } from '@/api/video/sysVideoData.js'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import * as echarts from 'echarts'
export default {
  mixins: [WebScoket],
  components: { videoPlayer },
  data() {
    return {
      traininfo: {},
      beondutylist: [],
      planData: [],
      url: '',
      // baseurl: 'http://192.168.0.114:58005/ra',
      baseurl: process.env.VUE_APP_BASE_API,
      srcList: [],
      desc: '',
      urltrain: '',
      srcLists: [],

      form: {
        psAreaName: null
      },
      airform: {
        desc: null
      },
      area: {
        alarmNum: null,
        personNum: null
      },
      psAreaNamelist: [],
      personData: [],
      phoneData: [],
      airData: [],
      auto: true,
      autoEquipments: [],
      equipmentData: [],
      websocketData: [],
      websocketData1: [],
      equipmentType: true,
      autoequipmentType: false,
      transShow: false,
      personShow: false,
      uuid: null,
      num: 0,
      Img: {
        backgroundImage: 'url(' + require('@/assets/images/img13.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      psPersonData: [],
      psPersonShow: false,
      name: '',
      gyurl: '',
      gyname: '',
      gyvideoData: [],
      tableData: [],
      headman: {
        rescuePost: null,
        rescuePer: null,
        rescueMemberType: null,
        phone: null
      },
      chargehand: {
        rescuePost: null,
        rescuePer: null,
        rescueMemberType: null,
        phone: null
      },
      member: {
        rescuePost: null,
        rescuePer: null,
        rescueMemberType: null,
        phone: null
      }
    }
  },
  filters: {
    videoOption(val) {
      return {
        live: false,
        // preload: 'auto',
        loop: true,
        autoplay: true,
        language: 'zh-CN',
        aspectRatio: '16:8',
        fluid: true,
        sources: [
          {
            src: val // url地址
          }
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        },
        flash: {
          hls: {
            withCredentials: false
          }
        }
      }
    }
  },
  mounted: function() {
    this.getMaterialStatistics()
    this.gettrain()
    this.getbeonduty()
    this.getPlan()
    this.getsystem()
    this.getAIpolice()
  },
  destroyed() {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    // AI视频报警处理
    getAIpolice() {
      this.$http.get('/video/aiWarnHistory/list').then(res => {
        if (res.code === 200) {
          this.url = this.baseurl + res.rows[0].wFile
          this.desc = res.rows[0].desc
          this.srcList.push(this.url)
        }
      })
    },
    // 应急救援组织管理
    getsystem() {
      this.$http.get('/emergency/sysEmergencyOrganization/list').then(res => {
        // res = res.data
        if (res.code == 200) {
          if (!res.rows[0]) {
            this.headman = {}
          } else {
            this.headman = res.rows[0]
          }
          if (!res.rows[1]) {
            this.chargehand = {}
          } else {
            this.chargehand = res.rows[1]
          }
          if (!res.rows[2]) {
            this.member = {}
          } else {
            this.member = res.rows[2]
          }
        }
      })
    },
    // 应急预案管理
    getPlan() {
      this.$http.get('/emergency/sysEmergencyPlanInfo/list').then(res => {
        if (res.code === 200) {
          this.planData = res.rows
        }
      })
    },
    // 应急值守与值班
    getbeonduty() {
      this.$http.get('/emergency/sysEmergencyDutyInfo/list').then(res => {
        if (res.code === 200) {
          this.beondutylist = res.rows
        }
      })
    },
    // 应急培训管理
    gettrain() {
      this.$http
        .get('/emergency/sysEmergencyTrainingInfo/training')
        .then(res => {
          if (res.code === 200) {
            this.traininfo = res.data
            this.urltrain = this.baseurl + this.traininfo.fileName
            this.srcLists.push(this.urltrain)
          }
        })
    },
    // 应急物资器材统计
    getMaterialStatistics() {
      this.$http
        .get('/emergency/sysEmergencyInfo/getMaterialStatistics')
        .then(res => {
          if (res.code === 200) {
            var chart1 = echarts.init(document.getElementById('data1'))
            var xData = res.data.equipmentName
            var yData = res.data.equipmentNum
            var option1 = {
              backgroundColor: '#111c4e00',
              color: ['#3398DB'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'line',
                  lineStyle: {
                    opacity: 0
                  }
                },
                formatter: function(prams) {
                  return (
                    prams[0].name +
                    '\n' +
                    '\n' +
                    '数量：' +
                    prams[0].value +
                    '个'
                  )
                }
              },
              legend: {
                data: ['直接访问'],
                show: false
              },
              grid: {
                left: '0%',
                right: '0%',
                bottom: '5%',
                top: '7%',
                height: '85%',
                containLabel: true,
                z: 22
              },
              xAxis: [
                {
                  type: 'category',
                  gridIndex: 0,
                  data: xData,
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#0c3b71'
                    }
                  },
                  axisLabel: {
                    show: true,
                    color: 'rgb(170,170,170)',
                    fontSize: 16
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  gridIndex: 0,
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  name: '单位/个',
                  // min: min,
                  // max: 100,
                  axisLine: {
                    lineStyle: {
                      color: '#0c3b71'
                    }
                  },
                  axisLabel: {
                    color: 'rgb(170,170,170)',
                    formatter: '{value}'
                  }
                }
              ],
              series: [
                {
                  name: '个',
                  type: 'bar',
                  barWidth: '15%',
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  itemStyle: {
                    normal: {
                      barBorderRadius: [30, 30, 0, 0],
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#00feff'
                        },
                        {
                          offset: 0.5,
                          color: '#027eff'
                        },
                        {
                          offset: 1,
                          color: '#0286ff'
                        }
                      ])
                    }
                  },
                  data: yData,
                  zlevel: 11
                }
              ]
            }

            chart1.setOption(option1)
          }
        })
    },
    // websocketonmessage(e) {
    //   this.websocketData = JSON.parse(e.data)
    //   if (this.form.psAreaName == null) {
    //     this.personData = this.websocketData
    //     const length = this.websocketData.length
    //     this.area.personNum = length
    //   } else {
    //     var newList = []
    //     this.websocketData.forEach(item => {
    //       if (item.psAreaCode === this.form.psAreaName) {
    //         newList.push(item)
    //       }
    //     })
    //     this.personData = newList
    //     const length = newList.length
    //     this.area.personNum = length
    //     return newList
    //   }
    // },
    // websocketonmessage1(e) {
    //   this.websocketData1 = JSON.parse(e.data)
    //   console.log(this.websocketData1)
    //   if (this.form.psAreaName == null) {
    //     this.tableData = this.websocketData1
    //     const length = this.websocketData1.length
    //     this.area.alarmNum = length
    //   } else {
    //     var newList = []
    //     this.websocketData1.forEach(item => {
    //       if (item.psAreaCode === this.form.psAreaName) {
    //         if (item.ssTransducerStatusName == '报警') {
    //           newList.push(item)
    //         }
    //       }
    //     })
    //     this.tableData = newList
    //     const length = newList.length
    //     this.area.alarmNum = length
    //     return newList
    //   }
    // },
    gettransList() {
      this.$http
        .get('/video/aiWarnHistory/list?pageNum=1' + '&pageSize=10')
        .then(res => {
          if (res.code == 200) {
            this.transShow = true
            this.tableData = res.rows
            this.tableData.forEach(item => {
              this.$set(item, 'wFiles', this.baseurl + item.wFile)
              this.$set(item, 'srcLists', [])
              item.srcLists.push(item.wFiles)
            })
            console.log(680, this.tableData)
          }
        })
    },
    getvideolist() {
      this.gyvideoData = []
      // 工业视频信息

      listVideo().then(res => {
        if (res.code == 200) {
          this.gyvideoData = res.data
          this.gyname = res.data[0].videoName
          this.gyurl = res.data[0].vurl
        }
      })
    },
    gyvideoShow(data) {
      console.log(data)
      this.gyname = data.videoName
      this.gyurl = data.vurl
    }
  },
  created() {
    this.getvideolist()
    // this.$emit('Gisval', 'jianKong')
  }
}
</script>

<style lang="scss">
.case-right-side {
  box-sizing: border-box;
  padding: 10px;
}
.el-textarea__inner {
  height: 120px;
  background: #2b286f;
  border: 1px solid rgba(60, 177, 195, 0.37);
}
</style>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: url('../../../assets/img/dialogback.png') no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0.2rem 0.4rem 0.3rem !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(6, 26, 57, 0.8) !important;
}
.train {
  height: 2rem;
  display: flex;
  justify-content: space-evenly;
  .trainvideo {
    width: 55%;
    height: 1.5rem;
    // background: pink;
    margin-left: 0.2rem;
    margin-top: 7%;
  }
  .traintext {
    width: 45%;
    padding: 0 0.2rem;
    margin-top: 7%;
    p {
      width: 100%;
      line-height: 0.2rem;
    }
    p:nth-child(1) {
      text-align: center;
      margin-bottom: 0.1rem;
    }
  }
}
.gyvideolist1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  li {
    width: 44%;
    height: 0.85rem;
    margin-bottom: 0.2rem;
    background: url('../../../assets/images/datakuang.png') no-repeat;
    background-size: 100% 100%;
    padding: 0.15rem;
    p {
      margin-bottom: 0.07rem;
      display: flex;
      justify-content: space-between;
      span:nth-child(2) {
        color: #24b2ec;
      }
    }
  }
}
.system-notice {
  padding: 0.2rem;
  h1 {
    font-size: 0.18rem;
    color: #00f6ff;
  }
  .lineimg {
    margin: 0.15rem 0 0.1rem 0;
  }
  div {
    display: flex;
    img {
      width: 0.2rem;
      height: 0.2rem;
      margin-right: 0.1rem;
    }
    span {
      vertical-align: sub;
      font-size: 0.16rem;
      line-height: 0.25rem;
    }
    span:nth-child(2),
    span:nth-child(3) {
      color: #00f6ff;
    }
  }
}
.fuse-title {
  position: relative;
  i {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0rem;
    color: #8dc0ff;
  }
}

.area_show {
  border: 1px solid #254163;
  width: 100%;
  border-radius: 4px;
  display: flex;
  li {
    flex: 1;
    text-align: center;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
  }
  li:first-child {
    border-right: 1px solid #254163;
  }
}
.fuse-main {
  box-sizing: border-box;
  padding: 10px;
}
.gyvideolist {
  display: flex;
  flex-direction: column;
  li {
    flex: 1;
    cursor: pointer;
    img {
      width: 100%;
    }
    .video-title {
      font-size: 0.14rem;
      line-height: 0.35rem;
      font-weight: 550;
      letter-spacing: 2px;
      color: #a4bec7;
      i {
        display: inline-block;
        width: 0.13rem;
        height: 0.13rem;
        background: #45e2f9;
        border-radius: 50%;
        margin-right: 0.1rem;
      }
    }
  }
}
.manage {
  position: relative;
  h5 {
    font-size: 0.14rem;
    line-height: 0.35rem;
    font-weight: 550;
    letter-spacing: 2px;
    color: yellow;
    i {
      display: inline-block;
      width: 0.13rem;
      height: 0.13rem;
      background: yellow;
      border-radius: 50%;
      margin-right: 0.1rem;
    }
  }
}
.organize {
  width: 100%;
  li {
    background: url(../../../assets/img/img36.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    // height: 0.89rem;
    box-sizing: border-box;
    padding-left: 0.8rem;
    font-size: 0.14rem;
    p {
      line-height: 0.2rem;
      padding-top: 0.15rem;
      display: flex;
      span:first-child {
        display: inline-block;
        width: 1.35rem;
      }
      span:last-child {
        color: #32bcff;
        background-image: -webkit-linear-gradient(top, #fff, #82dbfc, #32bcff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 550;
      }
    }
    h1 {
      line-height: 0.4rem;
      display: flex;
      span {
        font-size: 0.16rem;
        color: #32bcff;
        background-image: -webkit-linear-gradient(top, #fff, #82dbfc, #32bcff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 550;
      }
      span:first-child {
        display: inline-block;
        width: 1.2rem;
      }
    }
  }
}
</style>